extends layout/main-layout

block active-item
  - menu['Elements']['active'] = 1
  - menu['Elements']['S']['Grid Masonry']['active'] = 1

block content

  h3 Grid Masonry
    br
    small Pure CSS and mobile first with a fallback to inline grid.

  .row-masonry.row-masonry-xl-6.row-masonry-lg-4.row-masonry-md-3.row-masonry-sm-2
    .col-masonry
      .box-placeholder.m0(style="height: 180px")
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0(style="height: 100px")
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0(style="height: 180px")
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0(style="height: 180px")
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0(style="height: 100px")
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0(style="height: 180px")
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0(style="height: 180px")
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0(style="height: 100px")
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0(style="height: 180px")
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0(style="height: 180px")
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
    .col-masonry
      .box-placeholder.m0(style="height: 180px")
        p.text-center.text-muted: strong Masonry Item

  h4.page-header Masonry with any kind of element
  .row-masonry.row-masonry-md-4.row-masonry-sm-2
    .col-masonry
      img.img-thumbnail.img-responsive(src="app/img/bg1.jpg")
    .col-masonry
      img.img-thumbnail.img-responsive(src="app/img/bg4.jpg")
    .col-masonry
      img.img-thumbnail.img-responsive(src="app/img/bg2.jpg")
    .col-masonry
      img.img-thumbnail.img-responsive(src="app/img/bg5.jpg")
    .col-masonry
      img.img-thumbnail.img-responsive(src="app/img/bg6.jpg")
    .col-masonry
      img.img-thumbnail.img-responsive(src="app/img/bg7.jpg")
    .col-masonry
      img.img-thumbnail.img-responsive(src="app/img/bg8.jpg")
    .col-masonry
      img.img-thumbnail.img-responsive(src="app/img/bg9.jpg")
    .col-masonry
      img.img-thumbnail.img-responsive(src="app/img/bg10.jpg")

  p Supported from IE10. 
    a(href="http://caniuse.com/#feat=multicolumn") Can I Use.